This project is an attempt to have a google map look and feel (SLD) applied to Tiger data. I had originally built SLDs using the Basemap and manipulated tiger shape fields from http://nyc.freemap.in, but I wanted to build something more general that could be used for (mostly) out of the box Tiger data. My original writeup for crshmidt's data set can be found here. sigma-styles.zip has a number of styles for reference, including the ones detailed here. If you look at the attachments for this page you can also get the individual slds.
Final Product
This is what our Tiger Data/Google styles map looks like:
Now let's talk about how we got here.
Technologies Used
- Geoserver for hosting SLDs, WMS/WFS services and Tiger shape files
- Tiger data (import instructions)
- OpenLayers for web mapping and tiling
- Squid, for caching
Tiger Layers
The open layers tag for the embedded tiger layers:
var gs_all_wms = new OpenLayers.Layer.WMS( "Google", "http://sigma.openplans.org:3128/geoserver/wms?", {layers: 'topp:poly_landmarks,topp:water_polygon,topp:states,topp:roads,topp:major_roads,topp:gnis_pop', transparent: 'TRUE', BGCOLOR: '0xFFFFFF', styles: 'freemap_open_space,freemap_water,freemap_states,freemap_roads,freemap_major_roads,gnis_pop_ol', format: 'image/gif' } );
The major layers are landmarks, water, states, roads, major roads and gnis_pop. Order of layers is very important within the OpenLayers call as well as the SLD. For example, open spaces need to appear before roads. Otherwise, due to the nature of the Tiger data, parks would bleed onto the road and loose their nice borders. Also note the background color of the map's table cell:
<td bgcolor="#ede9e1">
Since all images are transparant, it's important that the map's HTML background be the familiar grey from google maps. That way the roads are the proper color.
All of the layers referenced in the WMS above have default non-google like styles, so an extra 'styles:' tag had to be added to map the layer to a new custom, google-like style. All styles have the prefix freemap and are attached to this writeup.
Styles
In developing SLDs, the quickest way to work was directly on the server. Instead of uploading modified SLDs through the web interface, I just edited them on disk and then reloaded them by clicking 'Apply' from the Geoserver web interface. It's also important to note that the SLDs attached will not validate against the SLD schema. They have several GeoServer specific tags which haven't made it into the spec.
freemap:open_space
This was modified from the original to support openplayers zoom levels and the new google colors. Here is the comment at the top:
All "H" cfcc are water ** blue/no outline (should be rendered using the water_polygon layer, labeled here) The rest ("D") are broken in two groups: a) park-like things ("green") D82 | 65233 Cemetery D85 | 23902 State or local park or forest D10 | 2601 Military installation or reservation D81 | 2558 Golf course D84 | 1875 National forest or other Federal land D83 | 1731 National Park Service land D28 | 429 Campground NOTE: this is all D8 (cfcc_1 = 'D' and cfcc_2='8') + D10 + D28 b) commercial/concrete things ("grey") All other "D" things (ie. cfcc_1 = 'D' AND not(cfcc_2='8' or cfcc = 'D10' or cfcc = 'D28') )
freemap:water
The water polygons layer is by far the one that takes the longest to render. We inelegantly drop off the water as we zoom out for performance reasons. It would be nice to have a more basic water polygons layer, or possibly coastline only data for the zoomed out levels. Water currently stops at 800,000;
<MaxScaleDenominator>800000</MaxScaleDenominator>
freemap_states
States are the opposite of water. They don't take long to render and are inaccurate when zoomed in (the state line of NJ cuts through lower Manhattan). Originally I was going to use a light grey dashed line when zoomed in and a darker line when zoomed out (a la Google). Since the data is so inaccurate at the zoomed in level, I just got rid of it completely. State boundrires start at 800,000. State names turn into abbreviations around 20 million.
freemap_roads
This layer is a a subset of the Tiger data containing all minor roads. They are numerous and only appeared at the most zoomed in levels. Street names vanish at 12,000 and the actual roads vanish at 40,000. They would take too long to render. The road widths get smaller as we zoom out to 40,000. Here is a screen shot:
freemap_major_roads
The major roads style covers Interstates, US Highways, State Highways and all non-trivial major roads. The roads disappear on zoom-out with the Interstates going away last. Google specific colors are used and the roads are thinned on zoom out. Highwats and Interstates have badges which are referenced locally:
These badges are embedded using GeoServer specific SLD tags:
<LabelPlacement>
<PointPlacement>
<AnchorPoint>
<AnchorPointX>0.5</AnchorPointX>
<AnchorPointY>0.5</AnchorPointY>
</AnchorPoint>
</PointPlacement>
</LabelPlacement>
<Fill>
<CssParameter name="fill">#000000</CssParameter>
</Fill>
<Graphic>
<ExternalGraphic>
<OnlineResource xlink:href="circle_shield.gif"/>
<Format>image/gif</Format>
</ExternalGraphic>
<Size>23</Size>
</Graphic>
<VendorOption name="group">yes</VendorOption>
<VendorOption name="spaceAround">5</VendorOption>
freemap_gnis
Here I also used the default SLD. We display city label sizes relative to their populations.
nyc_google.png (image/png)
freemap_states.sld (application/octet-stream)
freemap_roads.sld (application/octet-stream)
freemap_open_space.sld (application/octet-stream)
freemap_major_roads.sld (application/octet-stream)
freemap_gnis.sld (application/octet-stream)
openlayers.html (text/html)
freemap_water.sld (application/octet-stream)
freemap_roads.png (image/png)
interstate_shield.gif (image/gif)
ushighway-shield.gif (image/gif)
circle_shield.gif (image/gif)
sigma-styles.zip (application/zip)
